<template>
    <div>
        <section class="data_section">
            <div class="block" style="float: right">
                <el-row>
                    <span class="demonstration" style="font-size: 20px">时间范围</span>
                    <el-date-picker
                        v-model="timeRange"
                        type="datetimerange"
                        :picker-options="pickerOptions"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-row>
                <el-row style="height: 10px;margin-top: 30px">
                    <el-button type="primary" plain style="float: right" @click="sendRequest">确认</el-button>
                </el-row>
            </div>
            <!-- <tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency> -->
            <div class="line1" style="margin-top: 140px">
                <div id="line1" class="" style="width: 90%; height: 450px"></div>
            </div>
            <el-table
                :data="errorTableData"
                max-height="600"
                highlight-current-row
                style="width: 70%;margin-left: 15%"
            >
                <el-table-column property="changeIpIn" label="IP接收量" width="120">
                </el-table-column>
                <el-table-column property="changeIpOut" label="IP发送量" width="120">
                </el-table-column>
                <el-table-column property="changeTcpIn" label="TCP接收量" width="120">
                </el-table-column>
                <el-table-column property="changeTcpOut" label="TCP发送量" width="120">
                </el-table-column>
                <el-table-column property="changeUdpIn" label="UDP接收量" width="120">
                </el-table-column>
                <el-table-column property="changeUdpOut" label="UDP发送量">
                </el-table-column>
            </el-table>
        </section>
    </div>
</template>

<script>
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/line";
import "echarts/lib/chart/bar";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/markPoint";

import {get} from "../../request";

// import chart_json from "../../../json_data/chartData.json";
// import err_json from "../../../json_data/ErrPercent.json";
// import ava_json from "../../../json_data/Availability.json";

export default {
    data() {
        return {
            errorTableData: [],
            chart_json: {},
            tableData: [],
            start: "",
            end: "",
            timeRange: [new Date(2021, 5, 19, 16, 55, 0), new Date(2021, 5, 19, 16, 56, 0)],
            pickerOptions: {
                shortcuts: [{
                    text: '最近十分钟',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 600 * 1000);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一小时',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },

        };
    },
    components: {},
    mounted() {
        this.initData();
    },
    computed: {},
    methods: {
        sendRequest() {
            this.timeConvert();
            get({
                url: "/getHistoricalProtocolData",
                params: {
                    startTime: this.start,
                    endTime: this.end,
                }
            })
                .then((res) => {
                    var json_data = res.data.data;
                    console.log(res.data);
                    this.chart_json = res.data.chart;
                    this.tableData = res.data.table;
                    this.initData();
                })
                .catch((res) => {
                });
        },
        timeConvert() {
            let date = new Date(this.timeRange[0]);
            date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
            date.toJSON().substr(0, 19).replace('T', ' ');
            console.log(date)
            this.start = date;
            let date2 = new Date(this.timeRange[1]);
            date2.setMinutes(date2.getMinutes() - date2.getTimezoneOffset());
            date2.toJSON().substr(0, 19).replace('T', ' ');
            this.end = date2;
        },
        initData() {
            this.errorTableData = [
                {
                    changeIpIn: this.tableData.changeIpIn,
                    changeIpOut: this.tableData.changeIpOut,
                    changeTcpIn: this.tableData.changeTcpIn,
                    changeTcpOut: this.tableData.changeTcpOut,
                    changeUdpIn: this.tableData.changeUdpIn,
                    changeUdpOut: this.tableData.changeUdpOut,
                },
            ];
            this.drawChart();
        },
        drawChart() {
            this.myChart = echarts.init(document.getElementById("line1"));
            // this.initData();
            const colors = ["#6098f8", "#0926a6", "#f686a4", "#e9090d", "#50ed58", "#0c6e03"];
            const option = {
                color: colors,
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: [
                        "ipInReceives",
                        "ipOutRequests",
                        "tcpInSegs",
                        "tcpOutSegs",
                        "udpInDatagrams",
                        "udpOutDatagrams"
                    ],
                },
                xAxis: {
                    type: "category",
                    name: "Time",
                    boundaryGap: false,
                    data: this.chart_json.timeAxis,
                },
                yAxis: [
                    {
                        id: 0,
                        type: "value",
                        name: "数据报/段个数",
                        position: "left",
                        axisLine: {
                            lineStyle: {
                                color: "#999",
                            },
                        },
                        axisLabel: {
                            formatter: "{value}",
                        },
                        splitLine: {
                            show: false,
                        },
                    }
                ],
                series: [
                    {
                        name: "ipInReceives",
                        type: "line",
                        yAxisIndex: 0,
                        //   data: this.sevenDate[0],
                        showSymbol: false,
                        smooth: 0.7,
                        data: this.chart_json.ipInReceives,
                        animation: true,
                    },
                    {
                        name: "ipOutRequests",
                        type: "line",
                        yAxisIndex: 0,
                        //   data: this.sevenDate[1],
                        showSymbol: false,
                        smooth: 0.7,
                        data: this.chart_json.ipOutRequests,
                        animation: true,
                    },
                    {
                        name: "tcpInSegs",
                        type: "line",
                        yAxisIndex: 0,
                        showSymbol: false,
                        data: this.chart_json.tcpInSegs,
                        animation: true,
                        //   data: this.sevenDate[2],
                    },
                    {
                        name: "tcpOutSegs",
                        type: "line",
                        yAxisIndex: 0,
                        //   data: this.sevenDate[3],
                        showSymbol: false,
                        data: this.chart_json.tcpOutSegs,
                        animation: true,
                    },
                    {
                        name: "udpInDatagrams",
                        type: "line",
                        yAxisIndex: 0,
                        //   data: this.sevenDate[3],
                        showSymbol: false,
                        data: this.chart_json.udpInDatagrams,
                        animation: true,
                    },
                    {
                        name: "udpOutDatagrams",
                        type: "line",
                        yAxisIndex: 0,
                        //   data: this.sevenDate[3],
                        showSymbol: false,
                        data: this.chart_json.udpOutDatagrams,
                        animation: true,
                    },
                ],
            };
            this.myChart.setOption(option);
        },
    },
};
</script>

<style lang="less">
@import "../style/mixin";

.data_section {
    padding: 20px;
    margin-bottom: 40px;

    .section_title {
        text-align: center;
        font-size: 30px;
        margin-bottom: 10px;
    }
}

.line1 {
    display: flex;
    justify-content: center;
}
</style>
